<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>

    <div class="wrap">
        <p class="title">位移旋转晃动</p>
        <div class="hvr-grow">放大</div>
        <div class="hvr-shrink">缩小</div>
        <div class="hvr-pulse">循环大小</div>
        <div class="hvr-pulse-grow">循环大</div>
        <div class="hvr-pulse-shrink">循环小</div>
        <div class="hvr-push">一次小</div>
        <div class="hvr-pop">一次大</div>
        <div class="hvr-bounce-in">反弹变大</div>
        <div class="hvr-bounce-out">反弹变小</div>
        <div class="hvr-rotate">旋转</div>
        <div class="hvr-grow-rotate">放大倾斜</div>
        <div class="hvr-float">上移</div>
        <div class="hvr-sink">下移</div>
        <div class="hvr-forward">右移</div>
        <div class="hvr-backward">左移</div>
        <div class="hvr-bob">上下</div>
        <div class="hvr-hang">下上</div>
        <div class="hvr-skew">扭曲变形</div>
        <div class="hvr-skew-forward">左下角向右变形</div>
        <div class="hvr-skew-backward">左下角向左变形</div>
        <div class="hvr-wobble-horizontal">左右晃动</div>
        <div class="hvr-wobble-vertical">上下晃动</div>
        <div class="hvr-wobble-to-bottom-right">右下晃动</div>
        <div class="hvr-wobble-to-top-right">右上晃动</div>
        <div class="hvr-wobble-top">上面左右变形</div>
        <div class="hvr-wobble-bottom">下面左右变形</div>
        <div class="hvr-wobble-skew">中心店左右变形</div>
        <div class="hvr-buzz">左右加旋转</div>
        <div class="hvr-buzz-out">单次左右加旋转</div>

    </div>

    <div class="wrap">
        <p class="title">背景色相关</p>
        <div class="hvr-fade">变色</div>
        <div class="hvr-back-pulse">呼吸效果</div>
        <div class="hvr-sweep-to-right">向右显示背景</div>
        <div class="hvr-sweep-to-left">向左显示背景</div>
        <div class="hvr-sweep-to-bottom">向下显示背景</div>
        <div class="hvr-sweep-to-top">向上显示背景</div>
        <div class="hvr-bounce-to-right">向右反弹</div>
        <div class="hvr-bounce-to-left">向左反弹</div>
        <div class="hvr-bounce-to-bottom">向下反弹</div>
        <div class="hvr-bounce-to-top">向上反弹</div>
        <div class="hvr-radial-out">椭圆由内向外</div>
        <div class="hvr-radial-in">椭圆由外向内</div>
        <div class="hvr-rectangle-in">矩形由外向内</div>
        <div class="hvr-rectangle-out">矩形由内向外</div>
        <div class="hvr-shutter-in-horizontal">两边向中间</div>
        <div class="hvr-shutter-out-horizontal">中间向两边</div>
        <div class="hvr-shutter-in-vertical">上下向中间</div>
        <div class="hvr-shutter-out-vertical">中间向上下</div>

    </div>

    <div class="wrap">
        <p class="title">边框相关</p>
        <div class="hvr-border-fade">边框显示</div>
        <div class="hvr-hollow">背景消失</div>
        <div class="hvr-trim">内边框显示</div>
        <div class="hvr-ripple-out">向外扩散消失</div>
        <div class="hvr-ripple-in">向内内聚消失</div>
        <div class="hvr-outline-out">向外扩散</div>
        <div class="hvr-outline-in">外向内扩散</div>
        <div class="hvr-round-corners">边缘圆角</div>
        <div class="hvr-underline-from-left">下划线向右</div>
        <div class="hvr-underline-from-center">下划线中间向外</div>
        <div class="hvr-underline-from-right">下划线向左</div>
        <div class="hvr-reveal">边框相关</div>
        <div class="hvr-underline-reveal">下划线向上显示</div>
        <div class="hvr-overline-reveal">上划线向下显示</div>
        <div class="hvr-overline-from-left">上划线向右</div>
        <div class="hvr-overline-from-center">上划线中间向外</div>
        <div class="hvr-overline-from-right">上划线向左</div>

    </div>
    <div class="wrap">
        <p class="title">边框相关</p>
        <div class="hvr-shadow">阴影</div>
        <div class="hvr-grow-shadow">放大加阴影</div>
        <div class="hvr-float-shadow">下方立体阴影</div>
        <div class="hvr-glow">周围阴影</div>
        <div class="hvr-shadow-radial">上下阴影</div>
        <div class="hvr-box-shadow-outset">直线外阴影</div>
        <div class="hvr-box-shadow-inset">直线内阴影</div>

    </div>

    <div class="wrap">
        <p class="title">增加三角箭头</p>
        <div class="hvr-bubble-top">向上显示三角箭头</div>
        <div class="hvr-bubble-right">右边显示三角箭头</div>
        <div class="hvr-bubble-bottom">下面显示三角箭头</div>
        <div class="hvr-bubble-left">左边显示三角箭头</div>
        <div class="hvr-bubble-float-top">出现三角箭头按钮向下</div>
        <div class="hvr-bubble-float-right">出现三角箭头按钮向左</div>
        <div class="hvr-bubble-float-bottom">出现三角箭头按钮向上</div>
        <div class="hvr-bubble-float-left">出现三角箭头按钮向右</div>
    </div>

    <div class="wrap">
        <p class="title">卷曲</p>
        <div href="#" class="hvr-curl-top-left">Curl Top Left</div>
        <div href="#" class="hvr-curl-top-right">Curl Top Right</div>
        <div href="#" class="hvr-curl-bottom-right">Curl Bottom Right</div>
        <div href="#" class="hvr-curl-bottom-left">Curl Bottom Left</div>
    </div>

</body>

</html>